<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>邮箱验证</title>
    <link rel="stylesheet" th:href="@{/bootstrap-3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/bootstrap-3.3.7/css/bootstrap-theme.css}">
    <script  th:src="@{/bootstrap-3.3.7/js/jquery-3.6.0.js}"></script>
    <script  th:src="@{/bootstrap-3.3.7/js/bootstrap.js}"></script>
	<link rel="icon" href="https://hello-cloudbase-8gjiov0o2c938771-1305027038.tcloudbaseapp.com/EmailCheck/src/main/resources/static/1.ico"/>

<!--    <link rel="script" th:href="@{/bootstrap-3.3.7/js/jquery-3.6.0.js}">-->
<!--    <link rel="script" th:href="@{/bootstrap-3.3.7/js/bootstrap.js}">-->


    <style>
        body:not(.formOut){
            background-image: url(https://hello-cloudbase-8gjiov0o2c938771-1305027038.tcloudbaseapp.com/EmailCheck/src/main/resources/static/img/yuanshen-3-0.jpg);
            background-size: 1920px 900px;
            opacity: initial;
            background-repeat: no-repeat;
            opacity(0.8);
        }
        .letter{
            margin: auto;
            text-align: center;
            margin-top: 30px;
        }
        span.glyphicon{
            display: inline-block;
            margin-top: 30px;
        }
        .formOut{
            text-align: center;
            align-content: center;
            width: 400px;
            height: 500px;
            margin: auto;
            margin-top: 100px;
            border: 3px solid #8d8787 ;
            background-color: snow;
            background-color: rgb(232,238,241,0.8);
        }
        .form{
            margin-top: 40px;
        }
        .button{
            margin-top: 50px;
        }
        .button-fir{
            margin-right: 25px;
        }
        .button-sec{
            margin-left: 25px;
        }
        .form-control{
            width: 60%;
            margin-left: 80px;
        }
        .author{
            margin-top: 35px;
            margin-right: -200px;
        }
        #exampleInputPassword1{
            width: 30%;
            display: inline-block;
            margin-left: -10px;
            margin-right: 10px;
        }
        .yan{
            display: block;
        }

    </style>

</head>
<body>


<div class="formOut">
<h1 class="letter"> <span class="glyphicon glyphicon-envelope text-center" ></span></h1>


<form class="form-signin" th:action="@{/gets}" th:method="post" >
    <div class="form">
    <div class="form-group">
        <label for="exampleInputEmail1">邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail1" name="userEmail" th:placeholder="邮箱" th:value="${userEmail}" required>
    </div>
        <br/><br/>
    <div class="form-group">
        <label for="exampleInputPassword1" class="yan">验证码</label>
        <input type="number" class="form-control" id="exampleInputPassword1" name="userNum" th:placeholder="验证码">
        <a th:href="@{#}" target="_blank"></a><button type="submit" class="btn btn-default get">获取验证码</button>
        <!--如果正确即msg为null，否则msg不为空-->
        <label style="color: red" th:text="${msg}" th:value="${msg}" th:if="${not #strings.isEmpty(msg)}" class="hiddens"></label>
    </div>

    <div class="button">
        <span class="button-fir"><button type="submit" class="btn btn-default" id="check">验证</button></span>
        <span class="button-sec"><button type="reset" class="btn btn-default" id="reset">重置</button></span>
    </div>
    </div>

    <div class="author">(author: -- Jin) </div>
</form>
</div>

<script>

    $(function (){
        $('.get').click(function (){
	var input1=document.getElementById('exampleInputEmail1');
	if(input1.value==''){
	  alert("请输入邮箱，并输入正确的邮箱地址！");
	}else if(input1.value.indexOf("@") == -1){
	  alert("邮箱格式错误！"); 
	}else{
            alert("已发送，请等待十秒钟接收，服务配置低，请谅解！(-_-)");
            // $('.get').textContent = "已发送";
            $('.get').text("已发送");
            $('.get').style.color = "grey";
	} 
        })

	$('#check').click(function(){
	var input2=document.getElementById('exampleInputPassword1');
	if(input2.value==''){
	   alert("由于未输入验证码，已为您重新发送！");
	  }
	})
    })


/*
	function aaa(){
	var input2=document.getElementById('exampleInputPassword1');
	if(input2.value==''){
	   alert("请输入验证码！");
	   return false;
	}else
	   reutrn true;
	}

    $(function (){
        $('.get').click(function (){
	var input1=document.getElementById('exampleInputEmail1');
	if(input1.value!=''){
            alert("已发送，请等待十秒钟接收，服务配置低，请谅解！(-_-)")
            // $('.get').textContent = "已发送";
            $('.get').text("已发送");
            $('.get').style.color = "grey";
	}else if(input1.value ){
	  alert("请输入邮箱，并输入正确的邮箱地址！");
	}else 
        })
    })

*/

</script>


</body>
</html>